<template>
  <a-card class="general-card">
    <template #title>
      {{ `班级积分排行` }}
    </template>
    <template #extra>
      <a-link @click="$router.push('/student')">{{
        $t('workplace.viewMore')
      }}</a-link>
    </template>
    <a-table
      row-key="id"
      :data="store.squad_ranking"
      :pagination="false"
      :bordered="false"
      :scroll="{ x: '100%', y: '350px' }"
      :columns="(cloneColumns as TableColumnData[])"
      :loading="store.loading"
      size="mini"
    >
      <template #ranking="{ record, rowIndex }">
        <a-image
          width="22"
          height="22"
          :src="store.rankingImage[rowIndex]"
          v-if="record.ranking < 4"
        />
        <a-tag v-else>{{ rowIndex + 1 }}</a-tag>
      </template>
      <template #title="{ record }">
        <div
          style="
            height: 27px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
          >{{ record.title }}</div
        >
      </template>
    </a-table>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { useIndexStore } from '@/store';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  const store = useIndexStore();
  const cloneColumns = computed<TableColumnData[]>(() => [
    {
      title: `排名`,
      dataIndex: 'ranking',
      slotName: 'ranking',
      align: 'center',
      width: 60,
    },
    {
      title: `班名`,
      dataIndex: 'title',
      align: 'center',
      slotName: 'title',
      ellipsis: true,
      tooltip: true,
    },
    {
      title: `积分`,
      dataIndex: 'squad_score',
      align: 'center',
      width: 60,
    },
    // {
    //   title: `教师`,
    //   dataIndex: 'teacher_name',
    //   align: 'center',
    //   width: 70,
    // },
  ]);
</script>

<style scoped lang="less">
  .general-card {
    // max-height: 425px;
  }
</style>
